
import { useEffect } from "react"
import { IRouteComponentProps, Link, useDispatch, useSelector } from "umi"
import styles from './index.less'
import Category from "@/components/categoryNav"
import { formatDate } from '../../utils/index'
import { share } from "@/share"
import { EyeOutlined, ShareAltOutlined, HeartOutlined } from '@ant-design/icons';
import { IArticleItem, IShareItem } from "@/types"
import { CategoryDetails } from "@/types/modules/category"
import { CategoryModelState } from "@/models/category"
import classNames from "classnames"
import Right from "@/components/right/right"
const CategoryPage: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
    const id = match.params.id
    const { categoryType, categoryData } = useSelector((state: { category: CategoryModelState }) => state.category);

    const dispatch = useDispatch();
    //获取类型
    useEffect(() => {
        dispatch({
            type: 'category/getCategoryType',
            payload: id,
        })
    }, [id]);
    //获取类型数据
    useEffect(() => {
        dispatch({
            type: 'category/getCategoryData',
            payload: id,
        })
    }, [id]);
    function shareArticle(item: CategoryDetails) {
        share(item as unknown as IShareItem)
    }
    return <div className={classNames(styles.catrgoryId,'container')}>
        <div className={styles.category_details}>
        <div className={styles.head}>
            <p className={styles.classification}><h1>{categoryType.label}</h1><span>分类文章</span></p>
            <p className={styles.search}>共搜索到 <span>{categoryData.length}</span> 文章</p>
        </div>
        <Category />
        <div className={styles.scroll_content}>
            {
                categoryData.length && categoryData.length > 0 ? categoryData.map((item, index) => {
                    return <div key={index} className={styles.item_content}>

                        <dl>
                            <Link to={`/article/${item.id}`}>
                                <dt>
                                    <b>{item.title}</b>
                                    <span className={styles.exp}>{formatDate(item.updateAt)}</span>
                                    <span>{item.category ? item.category.label : null}</span>
                                </dt>
                            </Link>
                            <dd>
                                <Link to={`/article/${item.id}`}>
                                    <div className={styles.dl_left}>
                                        <img src={item.cover} alt="" />
                                    </div>
                                </Link>
                                <div className={styles.dl_right}>
                                    <p>{item.summary}</p>
                                    <div className={styles.icons}>
                                        <Link to={`/article/${item.id}`}>
                                            <HeartOutlined />
                                            <span>{item.likes}</span><span>·</span>
                                            <EyeOutlined />
                                            <span>{item.views}</span><span>·</span>
                                        </Link>
                                        <span onClick={() => shareArticle(item)}><ShareAltOutlined />   分享</span>
                                    </div>
                                </div>
                            </dd>
                        </dl>

                    </div>
                }) : "暂无数据"
            }

        </div>

    </div>
    <div  className={styles.catrgoryId_right}> 
        <Right/>
    </div>
    </div>
}
export default CategoryPage


